(function (fruit, ui) {
    ui.define('fruit.ui.TextBox', {
        view:{
            tag:'span',
            props:{
                'class':'f-textbox',
                role:'textbox',
                'tabindex':0,
                'aria-disabled':'{#disabled}'
            },
            content:[
                {
                    name:'text',
                    tag:'input',
                    props:{
                        type:'text',
                        value:'{#text}',
                        disabled:'{#disabled}',
                        placeholder:'{#placeholder}'
                    }
                },
                {
                    tag:'a'
                }
            ],
            events:{
                "focus":'{#_focus}',
                "blur":'{#_blur}'
            }
        },
        properties:{
            text:{
                value:null,
                observable:true
            },
            placeholder:{
                value:null,
                observable:true
            },
            disabled:{
                value:false,
                observable:true
            }
        },
        methods:{
            init:function (opts) {
                this.inherited(opts);
            },
            _focus:function () {
                var text = this.$("text");
                var isReadOnly = text.getAttribute("readOnly");
                if (!isReadOnly) {
                    this.$().addClass('f-textbox-focus');
                    fruit.dom.focus(this.$('text')._element);
                }
            },
            _blur:function () {
                this.$().removeClass('f-textbox-focus');
                fruit.dom.blur(this.$('text')._element);
            }
        }
    });
})(fruit, fruit.ui);